<template>
    <div class="Header">
        <div class="headerLeft">
            <div class="logo">
                <img src="@/assets/logo.png" alt="" class="logoImg">
                &nbsp;
                <span>MUSIC</span>
            </div>
            <div class="Hsearch">
                <headerSearch></headerSearch>
            </div>
        </div>

        <div class="headeright">

            <div class="HeaderUser">
                <div class="UserheadPportrait" v-if="!isLogin">
                    <img :src="userInfo.avatarUrl" alt="">
                </div>
                <el-avatar v-if="isLogin" size="small"
                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                <el-dropdown @command="handleCommand" v-if="!isLogin">
                    <span class="el-dropdown-link">
                        {{ userInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                <p class="loginP" v-if="isLogin" @click="Login">请登录</p>
                <svg t="1686837625511" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="11006" width="22" height="22">
                    <path
                        d="M742.21568 802.11968H281.8048V455.24992l-109.9776 55.07072-75.28448-188.17024 205.80352-100.27008h110.01856l3.97312 15.36A99.0208 99.0208 0 0 0 512 311.74656a99.2256 99.2256 0 0 0 95.8464-74.5472l3.95264-15.31904h114.76992l200.9088 100.43392-75.18208 187.98592-110.08-55.07072v346.89024z m-419.45088-40.96h378.49088V388.93568l129.536 64.83968 44.66688-111.63648-158.53568-79.27808h-74.3424a140.16512 140.16512 0 0 1-130.56 89.86624 139.93984 139.93984 0 0 1-130.41664-89.86624h-69.81632l-163.06176 79.4624 44.58496 111.45216 129.45408-64.83968v372.224z"
                        fill="#f9f9f9" p-id="11007"></path>
                </svg>
                <svg t="1686837721079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="12915" width="22" height="22">
                    <path
                        d="M545.784454 962.539206l-65.943898 0c-29.341259 0-54.624085-25.281803-54.624085-54.615898L425.216471 868.462574c0-9.623171-7.826246-20.911262-16.690124-23.680329l-1.566682-0.611937-55.725162-23.104207-0.880043-0.494257c-8.153704-4.41045-22.017456-2.376117-28.55229 4.187369l-28.17469 28.123524c-9.930163 9.977235-23.239284 15.494902-37.432541 15.494902-14.195304 0-27.507494-5.517667-37.487799-15.541975l-46.682205-46.630017c-20.60427-20.603247-20.6319-54.233182-0.069585-74.974575l28.15013-28.106128c6.637164-6.574742 8.676613-20.599154 4.253884-28.909423l-0.831948-1.768273-23.164582-56.128345-0.26913-0.682545c-2.803859-9.03477-14.279215-17.394159-23.611767-17.394159l-39.631626 0c-29.391401 0-52.861952-24.065092-52.861952-53.193503l0-65.943898c0-28.770254 22.998807-51.754734 52.919257-51.754734l39.575344 0c9.081843 0 20.803815-8.830109 23.666002-18.057261l0.567935-1.476631 23.163559-57.088206 0.505513-0.913812c4.40431-8.220219 2.319835-22.224164-4.2897-28.830629l-28.04166-28.087709c-9.964956-9.921977-15.486716-23.216771-15.502066-37.396725-0.01535-14.201443 5.492084-27.53717 15.507182-37.552268l46.6556-46.614667c9.94142-9.985422 23.248494-15.503089 37.432541-15.503089 0.001023 0 0 0 0.001023 0 14.184047 0 27.490098 5.51869 37.46938 15.540951l28.039613 28.05087c6.557346 6.525624 20.500916 8.596795 28.655643 4.231371l0.893346-0.478907 57.375755-23.64963c8.836249-2.731204 16.634866-14.037714 16.634866-23.719214l0-39.632649c0-28.967752 24.777313-52.095495 54.624085-52.095495L545.784454 64.076364c29.161157 0 52.370765 22.636556 52.370765 52.095495l0 39.632649c0 9.127891 8.709359 20.85498 17.767666 23.674189l1.51654 0.577145 56.639998 23.113417 0.923022 0.509606c8.202822 4.424776 22.184255 2.353604 28.788673-4.254907l28.163433-27.912723c9.895371-9.94142 23.179932-15.33936 37.352723-15.33936 0.019443 0 0.040932 0 0.060375 0 14.18814 0 27.508517 5.375427 37.516452 15.384385l46.709835 46.554292c10.004865 9.960863 15.524578 23.254633 15.524578 37.47552 0 14.18814-5.498224 27.506471-15.479553 37.532825l-28.16855 28.152177c-6.580882 6.610558-8.640798 20.771069-4.204765 29.107945l0.478907 0.896416 23.654746 57.956993c2.902096 9.255805 14.635325 18.114566 23.686469 18.114566l39.132252 0 0-0.573051c27.629267 0 52.188616 22.984481 52.188616 52.327786l0 65.998133c0 29.590945-22.985504 53.138244-51.746548 53.138244l-39.630602 0c-9.337669 0-20.84884 8.372691-23.686469 17.423835l-0.580215 1.51654-23.086811 56.240909-0.468674 0.860601c-4.419659 8.30413-2.393513 22.320355 4.169973 28.855188l28.135804 28.02017c10.031471 10.029424 15.539928 23.350824 15.537881 37.541011-0.004093 14.186094-5.514597 27.505447-15.518438 37.505195l-46.747697 46.682205c-9.920954 9.964956-23.219841 15.506159-37.406958 15.506159-0.019443 0-0.040932 0-0.060375 0-14.192234 0-27.514657-5.514597-37.518498-15.517415l-28.039613-28.095895c-6.490831-6.490831-20.807908-8.575306-28.887934-4.206812l-0.951675 0.514723-57.93755 23.680329c-9.087982 2.859118-17.823947 14.594393-17.823947 23.691585l0 39.460734C598.155219 937.76394 574.45954 962.539206 545.784454 962.539206zM421.86719 806.892287c25.192775 8.370645 44.282552 34.650171 44.282552 61.570287l0 39.460734c0 7.114025 6.569626 13.68365 13.691837 13.68365L545.784454 921.606958c6.496971 0 12.461823-6.043646 12.461823-13.68365L558.246277 868.462574c0-26.273387 19.516496-53.131081 44.901653-61.58052l53.859675-22.062482c23.62814-12.116969 56.342216-7.098675 75.118861 11.6749l28.009937 28.1532c2.432399 2.430352 5.678326 3.837398 9.179057 3.837398 0.00614 0 0.011256 0 0.01535 0 3.482311 0 6.726192-1.39886 9.135054-3.820002l46.780443-46.738487c2.436492-2.436492 3.783163-5.724375 3.78521-9.224082 0-3.495614-1.344624-6.774287-3.787256-9.216919l-28.106128-27.998681c-18.693758-18.609847-23.762193-51.349505-11.773138-75.036997l22.083971-53.603849c8.374738-25.167193 35.224246-44.51382 61.578474-44.51382l39.630602 0c7.745405 0 10.8143-7.086395 10.8143-13.229303l0-65.998133c0-6.862291-5.116531-12.07399-11.256368-12.302187l0 1.479701-39.132252 0c-26.236548 0-53.099359-20.149922-61.585637-45.735647l-22.083971-54.261834c-11.960403-23.654746-6.913457-56.502875 11.728112-75.228355l28.16855-28.192086c2.430352-2.441609 3.78828-5.764284 3.78828-9.295714 0-3.498684-1.334391-6.762007-3.759627-9.17394l-46.741557-46.577828c-2.462075-2.462075-5.736655-3.734044-9.234315-3.734044-0.004093 0-0.010233 0-0.013303 0-3.465938 0-6.700609 1.255597-9.105379 3.671623l-28.198226 28.037567c-18.703991 18.710131-51.417043 23.734564-75.000158 11.69025l-53.865815-22.072715c-25.403576-8.388041-44.934398-35.255968-44.934398-61.60508l0-39.632649c0-7.253194-5.517667-12.186554-12.461823-12.186554l-65.943898 0c-7.517207 0-13.691837 5.51869-13.691837 12.186554l0 39.632649c0 27.027563-19.107173 53.336766-44.325531 61.643965l-53.501518 21.99699c-23.834848 12.168134-55.857169 7.234775-74.878384-11.69639l-28.130687-28.115338c-2.441609-2.451842-5.690606-3.787256-9.152451-3.787256-3.462868-0.001023-6.704702 1.334391-9.117658 3.758604l-46.690392 46.64639c-2.438539 2.438539-3.784186 5.710049-3.781116 9.207709 0.004093 3.474125 1.339508 6.716982 3.762697 9.128915l28.068266 28.121478c18.698874 18.690688 23.782659 51.389414 11.808954 74.973552l-22.124903 54.813397c-8.413624 25.616424-35.281551 45.783743-61.603033 45.783743l-39.575344 0c-6.630001 0-13.010315 3.411703-13.010315 10.822486l0 65.943898c0 6.942109 5.753027 13.284561 12.95301 13.284561l39.631626 0c26.380834 0 53.195549 19.35072 61.524239 44.537356l22.182208 53.629431c12.027941 23.731494 6.918573 56.449663-11.863189 75.05644l-28.022217 27.949562c-5.021364 5.066389-5.048993 13.348006 0.010233 18.409279l46.713928 46.653553c2.452865 2.464121 5.695722 3.794419 9.168824 3.794419 3.472078 0 6.711865-1.336438 9.124821-3.759627l28.181853-28.122501c18.641569-18.730597 51.440579-23.752983 75.011414-11.642155L421.86719 806.892287z"
                        fill="#faf8f9" p-id="12916"></path>
                    <path
                        d="M513.734504 731.880873c-120.639614 0-218.786958-98.147344-218.786958-218.786958s98.147344-218.786958 218.786958-218.786958 218.786958 98.147344 218.786958 218.786958S634.375142 731.880873 513.734504 731.880873zM513.734504 334.324368c-98.573039 0-178.769546 80.195483-178.769546 178.769546s80.195483 178.769546 178.769546 178.769546 178.769546-80.195483 178.769546-178.769546S612.308567 334.324368 513.734504 334.324368z"
                        fill="#faf8f9" p-id="12917"></path>
                </svg>
                <svg t="1686837761718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="14097" width="22" height="22">
                    <path
                        d="M857.07264 155.96032a121.85088 121.85088 0 0 0-26.17856-2.85696H193.10592c-8.99072 0-17.74592 1.00352-26.17856 2.85696C109.90592 165.95968 66.56 215.69024 66.56 275.57888v473.83552c0 67.09248 54.38976 121.48224 121.48224 121.48224h647.9104c67.09248 0 121.48224-54.38976 121.48224-121.48224V275.57888c0.00512-59.88864-43.3408-109.6192-100.36224-119.61856z m-31.31392 68.99712l-265.4464 247.38816c-13.16352 12.26752-30.32064 19.0208-48.31232 19.0208s-35.1488-6.7584-48.31232-19.02592L198.24128 224.95744h627.51744z m60.81536 524.45184c0 27.90912-22.7072 50.61632-50.61632 50.61632H188.04224c-27.90912 0-50.61632-22.7072-50.61632-50.61632V275.57888c0-3.27168 0.33792-6.45632 0.93184-9.55904l277.01248 258.16576c27.2128 25.36448 61.92128 38.04672 96.62976 38.04672s69.41696-12.68224 96.62976-38.04672l277.01248-258.16576c0.59392 3.0976 0.93184 6.28736 0.93184 9.55904v473.8304z"
                        fill="#faf8f9" p-id="14098"></path>
                </svg>
            </div>
            <div class="Options">
                <div class="guandaofu">

                </div>
                <svg t="1686838573512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="17061" width="18" height="18">
                    <path
                        d="M476.936925 546.649148c-4.836145-4.926196-11.531638-8.014534-18.98233-8.014534l-239.052514 0.010233c-14.71412 0-26.644847 11.92561-26.644847 26.643823 0 14.72026 11.930727 26.637684 26.644847 26.637684l176.615487 0L214.360647 773.084297l37.682227 37.686321 180.862207-180.863231-0.841158 175.191044c0 14.70798 11.929704 26.643823 26.644847 26.643823s26.64587-11.935843 26.64587-26.643823L485.354642 565.28867C485.354642 557.388746 482.088248 551.022759 476.936925 546.649148zM831.741743 85.676311l-639.48451 0c-58.862619 0-106.58041 47.712675-106.58041 106.58041l0 639.485533c0 58.867736 47.717791 106.581434 106.58041 106.581434l639.48451 0c58.863642 0 106.581434-47.713698 106.581434-106.581434L938.323177 192.256722C938.323177 133.388986 890.605386 85.676311 831.741743 85.676311zM885.031437 831.742255c0 29.430286-23.856337 53.289694-53.289694 53.289694l-639.48451 0c-29.429263 0-53.290717-23.859407-53.290717-53.289694L138.966517 192.256722c0-29.437449 23.861454-53.290717 53.290717-53.290717l639.48451 0c29.434379 0 53.289694 23.853267 53.289694 53.290717L885.031437 831.742255zM805.09792 432.063413l-176.62265 0.008186L809.638329 250.907517l-37.684274-37.678134-180.859138 180.861184 0.841158-175.188998c0-14.719236-11.93175-26.644847-26.647917-26.644847-14.712073 0-26.643823 11.92561-26.643823 26.644847l0 239.807714c0 7.892761 3.2623 14.259772 8.414647 18.639522 4.835122 4.927219 11.535731 8.015557 18.987447 8.015557l239.051491-0.00921c14.718213 0 26.643823-11.93482 26.643823-26.644847C831.741743 443.990047 819.816133 432.063413 805.09792 432.063413z"
                        fill="#faf6f6" p-id="17062"></path>
                </svg>
                <svg t="1686838698680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="18095" width="18" height="18">
                    <path
                        d="M917.333333 554.666667H106.666667a21.333333 21.333333 0 0 1 0-42.666667h810.666666a21.333333 21.333333 0 0 1 0 42.666667z"
                        fill="#f6f6f6" p-id="18096"></path>
                </svg>
                <svg t="1686838764372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="22058" width="18" height="18">
                    <path
                        d="M172.8 1017.6c-89.6 0-166.4-70.4-166.4-166.4V441.6c0-89.6 70.4-166.4 166.4-166.4h416c89.6 0 166.4 70.4 166.4 166.4v416c0 89.6-70.4 166.4-166.4 166.4l-416-6.4z m0-659.2c-51.2 0-89.6 38.4-89.6 89.6v416c0 51.2 38.4 89.6 89.6 89.6h416c51.2 0 89.6-38.4 89.6-89.6V441.6c0-51.2-38.4-89.6-89.6-89.6H172.8z"
                        p-id="22059" fill="#f6f6f6"></path>
                    <path
                        d="M851.2 19.2H435.2C339.2 19.2 268.8 96 268.8 185.6v25.6h70.4v-25.6c0-51.2 38.4-89.6 89.6-89.6h409.6c51.2 0 89.6 38.4 89.6 89.6v409.6c0 51.2-38.4 89.6-89.6 89.6h-38.4V768h51.2c96 0 166.4-76.8 166.4-166.4V185.6c0-96-76.8-166.4-166.4-166.4z"
                        p-id="22060" fill="#f6f6f6"></path>
                </svg>
                <svg t="1686838789142" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="23132" width="18" height="18">
                    <path
                        d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z"
                        fill="#f6f6f6" p-id="23133"></path>
                </svg>
            </div>
        </div>
        <div v-if="isShow" class="erweimaLogin">
            <div class="erweimaLoginTop" @click="isShow = false">X</div>
            <p>二维码登录</p>
            <div class="img">
                <img :src="sginImgURL" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { GetqrCodeLoginKey, GetqrCodeLoginImg, GetqrCodeLoginCheck, GetUserAccount, LogOut } from "@/api/Playlist";
import headerSearch from '@/components/headerSearch.vue';
export default {
    components: {
        headerSearch
    },
    data() {
        return {
            sginImgURL: '',
            isShow: false,
            userInfo: {

            }
        }
    },
    computed: {
        isLogin() {
            return this.$store.state.Login.isLogin
        }
    },
    methods: {
        async Login() {
            let flag = true;
            this.isShow = true
            let nowTime = new Date().getTime()
            // 拿到生成二维码的key
            let key = (await GetqrCodeLoginKey(nowTime)).data.data.unikey
            // 二维码
            let sginImgURL = (await GetqrCodeLoginImg(key)).data.data.qrimg
            this.sginImgURL = sginImgURL
            // 每三秒判断一次二维码状态
            let check = setInterval(async () => {
                let nowtime2 = new Date().getTime();
                let res = await GetqrCodeLoginCheck(key, nowtime2).then()
                console.log(res.data.message, '---')
                if (res.data.code == 800) {
                    this.$message.error('二维码已过期');
                    flag=false
                    clearInterval(check)
                }
                if (res.data.code == 803) {
                    this.isShow = false
                    flag=false
                    window.sessionStorage.setItem('cookie', res.data.cookie)
                    GetUserAccount(nowtime2).then(res => {
                        this.$store.commit("Login/setIsLogin", false);
                        this.userInfo = res.data.profile
                    })
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    clearInterval(check)
                }
            }, 3000)
            setTimeout(() => {
                if (flag) {
                    clearInterval(check)
                    this.isShow = false
                    this.$message.error('二维码已过期');
                }
              
            }, 150000);
        },
        handleCommand(command) {
            if (command === 'logout') {
                LogOut()
                this.$store.commit("Login/setIsLogin", true);
            }
        }
    },
    created() {
        let timer = new Date().getTime()
        GetUserAccount(timer).then(res => {
            if (res.data.profile) {
                this.$store.commit("Login/setIsLogin", false);
                console.log(res.data.profile);
                this.userInfo = res.data.profile
            } else {
                this.$store.commit("Login/setIsLogin", true);
            }
        })
    },
}
</script>

<style lang="less" scoped>
.Header {
    width: 97vw;
    min-width: 1490px;
    max-width: 1920px;
    display: flex;

    .headerLeft {
        display: flex;

        .logo {
            width: 130px;
            display: flex;
            justify-content: center;
            align-items: center;

            .logoImg {
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }

            span {
                width: 100px;
            }

        }

        .Hsearch {
            margin-left: 100px;
            display: flex;
            align-items: center;
        }
    }

    .headeright {
        flex: 1;
        display: flex;
        justify-content: end;
        width: 360px;

        // margin-left: calc(100% - 630px - 380px);
        .HeaderUser {
            width: 220px;
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: rgb(233, 233, 233);
            transition: all 0.1s;

            &:hover {
                color: rgb(255, 255, 255);
            }

            .UserheadPportrait {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                padding-bottom: 7px;
                margin-right: 5px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .el-dropdown{
                height: 50px;
                .el-dropdown-link {
                font-size: 13px;
                color: rgb(233, 233, 233);
            }
            }
            

            .loginP {
                width: 50px;
                text-align: center;
            }

            >svg {
                margin-left: 12px;
            }
        }

        .Options {
            .guandaofu {
                width: 1px;
                height: 18px;
                border-right: 1px solid rgb(223, 222, 222);
            }

            width: 130px;
            display: flex;
            align-items: center;

            >.icon {
                margin-left: 12px;
            }
        }
    }

    .erweimaLogin {
        position: absolute;
        text-align: center;
        color: black;
        font-size: 20px;
        left: 50%;
        top: 50%;
        width: 400px;
        height: 600px;
        background-color: white;
        z-index: 1000;
        transform: translate(-50%, -50%);
    }

}</style>